<template>
  <!-- <v-scale-screen width="1600" height="1280"> -->
    <div class="app_main" :class="curentTab=='2'?'map-left-postion':''" id="app_main" style="overflow: hidden">
      <div>
        <ComHeaderNav @updateClickItems="updateClickItems" 
                      :tabId="curentTab" 
                      showType="sdk"
                      :list="[{
                        name: '整体统计',
                        value: 0
                      }, {
                        name: '应用分布',
                        value: 1
                      }, {
                        name: '地域分布',
                        value: 2
                      }]"/>    
      </div>
      <!-- 整体统计 -->
      <div v-if="curentTab === 0">
        <firstPage/>
      </div>
      <!-- 应用分布 -->
      <div v-if="curentTab === 1">
        <secondPage/>
      </div>
      <!-- 地域分布 -->
      <div v-if="curentTab === 2">
        <thirdPage/>
      </div>
    </div>
  <!-- </v-scale-screen> -->
</template>
<script setup>
 import { onBeforeMount, ref } from 'vue'
//  import VScaleScreen from 'v-scale-screen'
  import ComHeaderNav from '@/components/public/ComHeaderNavNew.vue';
  import firstPage from '../firstPage/indexView.vue';
  import secondPage from '../secondPage/indexView.vue';
  import thirdPage from '../thirdPage/indexView.vue';
  onBeforeMount(() => {
    console.log('onBeforeMount1');
  });
  const curentTab = ref(0);
  //切换页签
  const updateClickItems = (data) => {
    curentTab.value = data;
  }
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
.app_main {
  width: 100%;
  min-height: 100%;
  background: #060d32;
  // background-image: url('../../assets/BG.png');
  // background-size: cover;
  // position: relative;
  // overflow: scroll;
  // position: absolute;
  // z-index: 1;
  // min-width: 1370px;
  // background-position: 0 -90px; 
}
.map-left-postion{
  // background-position: -330px -50px !important; 
}
</style>